<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>资讯评论</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="/weixin/css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			textarea{
				margin-bottom: 0px;
			}
			.lmj-content-man-name{
				color: #007AFF;
				margin-right: 10px;
			}
			.mui-table-view-cell>a:not(.mui-btn) {
			    white-space:normal;
			}
			.lmj-content-man-img{
				border-radius: 50%;
				overflow: hidden;
			}
			.lmj-content-fabu-btn{
				margin-top: -5px;
				margin-bottom: 20px;
				width: 100%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">资讯评论</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<h4>我的评论</h4>
				<p>文明上网理性发言，请遵守新闻评论服务协议</p>
			</div>
			
			<textarea id="commentContent" rows="5" ></textarea>
			
			<div class="mui-content-padded">
				<button type="button" id="commentSubBtn" class="mui-btn mui-btn-primary mui-pull-right lmj-content-fabu-btn">发布</button>
				<div class="mui-clearfix"></div>
				<h4>全部评论</h4>
			</div>
				
				<ul class="mui-table-view" id="commentUl">
					
				</ul>
			
		</div>
		<script src="/weixin/js/mui.min.js"></script>
		<script src="/weixin/js/jquery.min.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
				var self=plus.webview.currentWebview();
				var infoId=self.infoId;
				//显示评论的内容；
				commentDisplay();
				
				//评论内容的提交
				jQuery("#commentSubBtn").click(function(){
					var commentContent=jQuery("#commentContent").val();
					if(commentContent.length==0){
						mui.alert('请填写您要评论的内容', '美丽乡村');
					}else if(commentContent.length>100){
						mui.alert('评论的内容不能超过100个字', '美丽乡村');
					}else{
						mui.ajax('http://192.168.1.124:8080/wx/portal/insert',{
							data:{
								infoId:infoId,
								content:commentContent
							},
							type:'get',
							success:function(data){
								if(data=='success'){
									jQuery("#commentContent").val("");
									mui.alert('评论成功', '美丽乡村', function() {
										commentDisplay();
									});
								}else{
									mui.alert('评论失败，请稍后再试', '美丽乡村');
								}
							}
						});
					}
					
				});
				
				function commentDisplay(){
					jQuery("#commentUl").empty();
					mui.ajax('http://192.168.1.124:8080/wx/portal/comment',{
						data:{
							id:infoId
						},
						type:'get',
						success:function(data){
							for(var i=0;i<data.length;i++){
								var commentCell="<li class='mui-table-view-cell mui-media'><a href='javascript:;'><img class='mui-media-object mui-pull-left lmj-content-man-img' src='../../images/logo.png'>"+
												"<div class='mui-media-body'><p class='lmj-content-man-name mui-pull-left'>"+data[i].nickName+"</p><p>"+data[i].commentTime+"</p><span>"+data[i].content+"</span></div></a></li>";
								jQuery("#commentUl").append(commentCell);
							}
						},
						error:function(xhr,type,errorThrown){
							jQuery("#commentUl").append("暂无数据");
							console.log(xhr);
							console.log(type);
							console.log(errorThrown);
						}
					});
				}
				
			});
		</script>
	</body>

</html>